<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请假信息管理系统 -- 请假申请管理</title>
    <script src="../../../js/jquery.min.js"></script>
    <link href="../../../css/classManage/classesManage.css" rel="stylesheet">
    <link href="../../../css/common/common.css" rel="stylesheet">
</head>
<body>
<!-- 顶部弹出提示信息容器 -->
<!--蓝色提示成功信息-->
<div id="notificationBlue" class="notificationBlue">
    <span id="messageBlue"></span>
</div>
<!--灰色提示普通信息-->
<div id="notificationGrey" class="notificationGrey">
    <span id="messageGrey"></span>
</div>
<!--黄色色提示警告信息-->
<div id="notificationYellow" class="notificationYellow">
    <span id="messageYellow"></span>
</div>
<!-- 头部 -->
<head th:insert="~{common/common::header}">
</head>
<!-- 左边 -->
<aside th:insert="~{common/common::aside}">
</aside>
<!-- 中间 -->
<main class="main">
    <div class="box">
        <div class="search-container">
            课程名称：<input type="text" class="search-box" placeholder="搜索..." id="searchCourseName">
<!--            请假天数：<input type="text" class="search-box" placeholder="搜索..." id="searchDayNum">-->
            <button class="search-button action-button" onclick="searchLeaveApply()">搜索</button>
            <button class="reset-button action-button" onclick="reset()">重置</button>
        </div>
        <div>
            <button class="add-button action-button"  onclick="addLeaveAplyInfo()">填写请假申请+</button>
        </div>
        <table>
            <thead>
            <tr>
                <th>请假编号</th>
                <th>课程名称</th>
                <th>请假是由</th>
                <th>请假时间(天)</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="leaveVo,leaveVos:${pageVo.list}">
                <td th:text="${leaveVo.leaveID}">数据1</td>
                <td th:text="${leaveVo.courseName}">数据2</td>
                <td th:text="${leaveVo.reason}">数据3</td>
                <td th:text="${leaveVo.dayNum}">数据4</td>
                <td th:if="${leaveVo.status} == 0" th:text="未审批">状态1</td>
                <td th:if="${leaveVo.status} == 1" th:text="同意">状态2</td>
                <td th:if="${leaveVo.status} == 2" th:text="不同意">状态3</td>

                <td class="action-buttons">
                    <button id="editButton" class="action-button edit-button" th:onclick="checkLeaveApplyPage('[(${leaveVo.leaveID})]') " >查看详情</button>
                    <button th:if="${leaveVo.status} != 1" id="deleteButton" class="action-button delete-button" th:onclick="deleteLeaveApply('[(${leaveVo.leaveID})]')">删除</button>
                </td>
            </tr>
            </tbody>
        </table>

        <div class="pagination">
            <span th:text="'共'+${pageVo.getTotal()}+'条'"></span>
            <span class="page-link" id="beforePage" onclick="beforeChangePage()"> 上一页 </span>
            <span th:text="'页号：'+${pageVo.getPageNum()}"></span>
            <span class="page-link" id="afterPage" onclick="afterChangePage()"> 下一页 </span>
        </div>
    </div>
</main>j
</body>

<script th:inline="javascript" type="text/javascript">

    function showNotification(id) {
        const notification = document.getElementById(id);
        notification.classList.add("show");

        setTimeout(function() {
            notification.classList.remove("show");
        }, 2000); // 3秒后自动消失
    }

    var data = [[${pageVo.list}]]
    console.log(data);

    function addLeaveAplyInfo(){
        window.location.href = '/leaveApply/addLeavePage'
    }

    var messageInfo = [[${resultInfo?.message}]];
    if(messageInfo != null){
        document.getElementById("messageBlue").innerHTML = messageInfo;
        this.showNotification("notificationBlue");
    }
    var pageNum = [[${pageVo.getPageNum()}]];
    var pageSum = [[${pageVo.pages}]]
    if(pageNum === 1){
        document.getElementById("beforePage").style.display = 'none';
    }
    if(pageNum === pageSum || pageSum === 0){
        document.getElementById("afterPage").style.display = 'none';
    }

    function beforeChangePage(){
        pageNum = pageNum - 1;
        window.location.href = '/leaveApply/list?pageNum='+pageNum+'&pageSize=7';
    }

    function afterChangePage(){
        pageNum = pageNum + 1;
        window.location.href = '/leaveApply/list?pageNum='+pageNum+'&pageSize=7';
    }

    function deleteLeaveApply(leaveApplyId){
        if(confirm("确定要删除id为"+leaveApplyId+"的申请信息吗？")){
            window.location.href = '/leaveApply/deleteleaveApply?leaveId='+leaveApplyId;
        } else {
            document.getElementById("messageGrey").innerHTML = "取消删除";
            this.showNotification("messageGrey");
        }

    }

    function outLogin(){
        location.href = '/outLogin'
    }

    function checkLeaveApplyPage(leaveID){
        window.location.href = '/leaveApply/checkLeaveApplyPage?leaveID=' + leaveID;
    }

    function searchLeaveApply(){
        let searchCourseName = document.getElementById("searchCourseName").value;
        // var searchDayNum = parseInt(document.getElementById("searchDayNum").value);
        // document.getElementById("dayNum").value = dayNum;
        window.location.href = '/leaveApply/list?pageSize=7&pageNum=1&courseName=' + searchCourseName
    }

    function reset(){
        document.getElementById("searchCourseName").value = "";
    }
</script>

</html>